﻿<!DOCTYPE html>
<html>
<head>
    <title>test</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            background-color: #000000;
        }

    </style>


    <script src="../../js/pixi3.dev.js"></script>
    <script src="../../dist/EZGUI.js"></script>
</head>
<body>
    <script>
        var guiTheme = {
            __config__ : {
                "name": "kenney-theme",
                "resources": [
                    "../../assets/kenney-theme/kenney-atlas.json",
                    "../../assets/kenney-theme/images/bg.png"
                ]
            },
            default: {
                scale: 0.5,
                bg: './img/bg.png',
                bgPadding: 6,
                corner: './img/corner2.png',
                line: './img/topline2.png',
                font: {
                    size: "20px",
                    family: "Arial",
                    color: "black"
                }
                
            },
            Window: {
                bgPadding: 5,
                bg: 'wnd-grey-bg.png',
                corner: 'wnd-grey-corner.png',
                line: 'wnd-grey-line.png'
            },
            blueheader: {
                bgPadding: 6,
                bg: 'btn-blue-bg-down.png',
                font: {
                    size: "20px",
                    family: "Arial",
                    color: "white"
                },
                "corner-tl": { default: 'btn-blue-corner-tl-down.png' },
                "corner-tr": { default: 'btn-blue-corner-tr-down.png' },
                "corner-bl": { default: 'btn-blue-corner-bl-down.png' },
                "corner-br": { default: 'btn-blue-corner-br-down.png' },

                "line-t": { default: 'btn-blue-line-t-down.png' },
                "line-r": { default: 'btn-blue-line-r-down.png' },
                "line-b": { default: 'btn-blue-line-b-down.png' },
                "line-l": { default: 'btn-blue-line-l-down.png' },

            },
            List: {
                bg: 'sld-grey-bg.png',
                bgPadding: 5,
                corner: 'sld-grey-corner.png',
                line: 'sld-grey-line.png'
            },
            Button: {
                bgPadding: 6,
                bg: 'btn-grey-bg.png',

                "corner-tl": { default: 'btn-grey-corner-tl.png' },
                "corner-tr": { default: 'btn-grey-corner-tr.png' },
                "corner-bl": { default: 'btn-grey-corner-bl.png', down: 'btn-grey-corner-bl-down.png' },
                "corner-br": { default: 'btn-grey-corner-br.png', down: 'btn-grey-corner-br-down.png' },

                "line-t": { default: 'btn-grey-line-t.png' },
                "line-r": { default: 'btn-grey-line-r.png' },
                "line-b": { default: 'btn-grey-line-b.png', down: 'btn-grey-line-b-down.png' },
                "line-l": { default: 'btn-grey-line-l.png' },

            },
            bluebutton: {
                bgPadding: 6,
                bg: 'btn-blue-bg.png',

                "corner-tl": {default:'btn-blue-corner-tl.png'},
                "corner-tr": {default:'btn-blue-corner-tr.png'},
                "corner-bl": { default: 'btn-blue-corner-bl.png', down: 'btn-blue-corner-bl-down.png' },
                "corner-br": { default: 'btn-blue-corner-br.png', down: 'btn-blue-corner-br-down.png' },

                "line-t": { default: 'btn-blue-line-t.png' },
                "line-r": {default:'btn-blue-line-r.png'},
                "line-b": { default: 'btn-blue-line-b.png', down: 'btn-blue-line-b-down.png' },
                "line-l": { default: 'btn-blue-line-l.png' },
                
            },
            Checkbox: {
                bgPadding: 6,

                bg: 'wnd-grey-bg.png',
                corner: 'wnd-grey-corner.png',
                line: 'wnd-grey-line.png',
                checkmark: 'chk-grey-checkmark.png',

                font: {
                    color: "green"
                }
            },
            Radio: {
                //bg: './img/bg.png',
                bgPadding: 6,
                //corner: { img: './img/corner2.png', checked: './img/corner2-hover.png'},
                //line: { img: './img/topline2.png', checked: './img/topline2-hover.png' },
                //image: { default: './img/chk-default.png', checked: './img/chk-checked.png' }

                bg: 'wnd-grey-bg.png',
                corner: 'wnd-grey-corner.png',
                line: 'wnd-grey-line.png',
                checkmark: 'chk-grey-checkmark.png',

                checkmark: 'chk-grey-checkmark.png'
            }
        }
        var guiObj = {
            id: 'main',
            component: 'Window',
            header: { id: 'ttl', /*skin: 'blueheader', */position: { x: 0, y: 0 }, height: 40, text: 'Header' },
            draggable: true,
            
            /*padding: 4,*/
            position: { x: 0, y: 0 },
            width: 500,
            height: 500,
            image_: 'header-background-skin.png',

            layout: [1, 3],
            children: [
              {
                  id: 'btn1',
                  text: 'btn',
                  component: 'Button',
                  /*skin: 'bluebutton',*/
                  position: 'right bottom',
                  width: 190,
                  height: 80,
                  children: [
                      { id: 'sbtn4', text:'Hello', component: 'Label', position: 'center right', width: 90, height: 90 },
                ]
                  //left: './img/bt-left.png',
                  //right: './img/bt-right.png',
                  //bg: './img/bt-bg.png'
              },
            {
                id: 'hlist1',
                component: 'List',

                padding: 3,
                position: 'center',
                width: 400,
                height: 150,
                layout: [4, null],
                children: [
                    { id: 'sbtn4', component: 'Button', position: 'center', width: 90, height: 90 },
                    { id: 'sbtn4', component: 'Button', position: 'center', width: 90, height: 90 },
                    { id: 'sbtn4', component: 'Button', position: 'center', width: 90, height: 90 },
                    { id: 'sbtn4', component: 'Button', position: 'center', width: 90, height: 90 },
                    { id: 'sbtn4', component: 'Button', position: 'center', width: 90, height: 90 },
                    { id: 'sbtn4', component: 'Button', position: 'center', width: 90, height: 90 },
                    { id: 'sbtn4', component: 'Button', position: 'center', width: 90, height: 90 },
                    { id: 'sbtn4', component: 'Button', position: 'center', width: 90, height: 90 },
                    { id: 'sbtn5', component: 'Button', position: 'center', width: 90, height: 90 }
                ]
            },
              {
                  id: 'sld1',
                  component: 'Slider',

                  slide: { width: 30, height: 40 },
                  position: 'center',
                  text: 'Checkbox',
                  width: 200,
                  height: 40

              }
              //{
              //    id: 'btn2',
              //    component: 'Radio',
              //    group: 1,
              //    position: 'center',
              //    text: 'Radio',
              //    width: 40,
              //    height: 40

              //}
            ]
        }




        // create an new instance of a pixi stage
        // the second parameter is interactivity...
        var interactive = true;
        var renderer = PIXI.autoDetectRenderer(820, 800); //new PIXI.CanvasRenderer(820, 800);//
        renderer.backgroundColor = 0x4a4137;



        var stage = new PIXI.Stage();


        //EZGUI.tilingRenderer = new PIXI.CanvasRenderer();

        // add the renderer view element to the DOM
        document.body.appendChild(renderer.view);
        var guiContainer, theme;
        
        
        function onAssetsLoaded() {



            requestAnimationFrame(animate);
            //sprite.setTexture(texture2);


            EZGUI.Theme.load([
                '../../assets/metalworks-theme/metalworks-theme.json',
                '../../assets/kenney-theme/kenney-theme.json'], function () {

                    guiContainer = EZGUI.create(guiObj, 'metalworks');


                stage.addChild(guiContainer);

            });


            //theme = new EZGUI.Theme(guiTheme);
            //theme.onReady(function () {
            //    guiContainer = EZGUI.create(guiObj, theme);
            //    stage.addChild(guiContainer);
            //});


            function animate() {

                requestAnimationFrame(animate);
                renderer.render(stage);
            }
        }


        onAssetsLoaded();


        
    </script>

</body>
</html>
